<template>
    <div class="login-container">
        <div class="login-body">   
            <div class="login-title">   
                <p class="en">WECLOME TO LOGIN</p>   
                <p class="cn">欢迎登录</p>   
            </div>
            <el-form :model="loginForm" ref="loginForm" class="demo-ruleForm" @submit.native.prevent>
                <el-form-item prop="email">
                    <el-input placeholder="邮箱" prefix-icon="fa fa-user" v-model="loginForm.email"  @keyup.enter.native="loginSubmit('loginForm')"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" prefix-icon="fa fa-unlock-alt" v-model="loginForm.password"  @keyup.enter.native="loginSubmit('loginForm')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="loginbtn" :loading="loginSubmitLoading" 
                     @click="loginSubmit('loginForm')">{{loginSubmitLoading ? '登录中' : '登录'}}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import { userLogin } from '../api/login'
    export default {
        data() {
            return {
                loginForm: {
                    email: '',
                    password: ''
                },
                loginSubmitLoading: false
            }
        },
        methods: {
            loginSubmit(formName) {
                // this.loginSubmitLoading = true
                if (this.loginForm.email != '' && this.loginForm.password != '') {
                    let param = {
                            email: this.loginForm.email,
                            password: this.loginForm.password
                        }
                    userLogin(param).then(res => {
                        if (res.status == 0) {
                            // this.$store.dispatch('login', res.data)
                            // console.log(res.result);return false;
                            // this.$store.commit('UPDATE_USER', res.result)
                            this.$store.dispatch('login', res.result)
                            this.$router.push('/')
                        } else {
                            this.loginSubmitLoading = false
                            this.$message({
                                message: '账号密码错误！',
                                type: 'warning',
                                duration: 1500,
                            });
                        }
                    });
                } else {
                    this.loginSubmitLoading = false
                    this.$message({
                        message: '账号密码不能为空！',
                        type: 'warning',
                        duration: 1500
                    });
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .login-container {
    
        .el-form-item__error {
    
            left: 130px;
    
        }
    
        background: url(/images/login.jpg);
    
        height: 100%;
    
        text-align: center;
    
        .login-body {
    
            .el-form-item__error {
    
                left: 130px;
    
            }
    
            height: 450px;
    
            width: 600px;
    
            background: #fff;
    
            position: absolute;
    
            margin: auto;
    
            top: -30px;
    
            left: 0;
    
            right: 0;
    
            bottom: 0;
    
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    
            border-radius: 12px;
    
            .login-title {
    
                margin: 50px 0px;
    
                .en {
    
                    font-size: 22px;
    
                    font-weight: bold;
    
                }
    
                .cn {
    
                    font-size: 16px;
    
                }
    
            }
    
        }
    
        .el-input {
    
            width: 350px;
    
        }
    
        .loginbtn {
    
            margin-top: 30px;
    
            width: 350px;
    
            color: #fff;
    
            background: linear-gradient(60deg, #2AC893, #33F2AA);
    
            border: 0px;
    
        }
    
        .loginbtn:hover {
    
            background: linear-gradient(60deg, #33F2AA, #2AC893);
    
        }
    
    }
    
    
    
    .el-form-item__error {
    
        left: 130px;
    
    }
</style>